export default (props:any) => {
  const { attributes, children, leaf } = props;
  const styles: any = {};

  Object.keys(leaf).forEach((key) => {
    if (/^style-/.test(key)) {
      let styleKey = key?.split("style-")?.[1];
      if (/[a-zA-Z0-9]*\.[a-zA-Z0-9-]*$/.test(styleKey)) {
        const [, key1, key2] = /([a-zA-Z0-9-].*)\.([a-zA-Z0-9-].*)$/g.exec(
          styleKey
        )||[];
        if (styles[key1]) {
          styles[key1] = `${styles[key1]} ${key2}`;
        } else {
          styles[key1] = key2;
        }
      } else {
        styles[styleKey] = leaf[key];
      }
    }
  });

  if (Object.keys(styles)?.length) {
    return (
      <span
        {...attributes}
        style={{
          ...styles,
           paddingLeft: leaf.text === "" ? "2px" : undefined,
        }}
      >
        {children}
      </span>
    );
  }

  return (
    <span
      {...attributes}
       style={{ paddingLeft: leaf.text === "" ? "2px" : undefined }}
    >
      {children}
    </span>
  );
};
